import {message, Table} from 'antd';
import React, {useState} from 'react';
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import {saveAndUpdatePerformanceRatio} from '../service';
import ConfigForm from '../components/ConfigForm';

const TableList = () => {

  const [visible,setVisible]=useState(false);
  const [loading, setLoading] = useState(false);
  const [id,setId] = useState(null);
  const tableData = [{name:'单位总体占比率'}];

  const columns = [
    {
      title: '类型',
      align: 'center',
      width: '48.5%',
      dataIndex: 'name',
    },
    {
      title: '操作',
      align: 'center',
      key: 'action',
      render: () => (
        <>
          <a onClick={() => setConfig(1)}>配置</a>
        </>
      ),
    },
  ];

  const expandedRowRender = () => {
    const expandedColumns = [
      {title: '单位总体占比率',width:'50%',align:'center', dataIndex: 'type'},
      {title: '操作',dataIndex: 'operation', width:'50%', align:'center',
        render: (text,record) => (<a onClick={() => setConfig(record.id)}>配置</a>)
      },
    ];
    const data = [
      {type: '个人A占比率', key: 'A', id: 2},
      {type: '个人B+占比率', key: 'B+', id: 3},
      {type: '个人B占比率', key: 'B', id: 4},
      {type: '个人C占比率', key: 'C', id: 5},
      {type: '个人D占比率', key: 'D', id: 6}
    ];
    return <Table showHeader={false} columns={expandedColumns} dataSource={data} pagination={false} />;
  };

  const setConfig = (id) => {
    setId(id);
    setVisible(true);
  };

  const handleSubmit = (values) => {
    setLoading(true);
    saveAndUpdatePerformanceRatio(values).then(res => {
      if (res.flag) {
        handleCancel();
        message.success(`保存成功！`);
      } else {
        message.error(`保存失败，错误:` + res.error);
      }
      setLoading(false);
    })
  };

  const handleCancel = () => {
    setId(null);
    setVisible(false);
  };

  return (
    <PageHeaderWrapper>
      <Table
        rowKey='name'
        dataSource={tableData}
        columns={columns}
        pagination={false}
        expandable={{expandedRowRender}}
      />
      <ConfigForm
        loading={loading}
        visible={visible}
        id={id}
        onCancel={handleCancel}
        onSubmit={handleSubmit}
      />
    </PageHeaderWrapper>
  )
};

export default (TableList);
